// 核对缺失数据
<template>
    <div>
        <el-popover v-model="searchShow" placement="bottom-start" trigger="click">
            <template>
                <p class="mb8 c-red">请先选择日期：</p>
                <el-date-picker
                  class="mb8"
                  size="small"
                  v-model="date"
                  type="month"
                  format="yyyy年MM月"
                  value-format="yyyy-MM"
                  placeholder="选择日期">
                </el-date-picker>
                <p class="flex-justify-end">
                    <el-button size="small" type="primary"  @click="submit">确定</el-button>
                </p> 
            </template>
            <el-button size="small" slot="reference">核对缺失数据</el-button>
        </el-popover>
        <el-dialog
            width="50%"
            :visible.sync="dialogFormVisible">
            <el-table
                ref="table"
                id="out-table"
                :data="tableData"
                min-height="300"
                max-height="600"
                size="small"
                border
                highlight-current-row
                v-loading="tableLoading"
                stripe>
                <el-table-column
                    align="center"
                    v-for="item in headerList"
                    :key="item.prop"
                    :prop="item.prop"
                    :label="item.label"
                    :width="item.width"
                    show-overflow-tooltip>
                </el-table-column>
                </el-table>
        </el-dialog>
    </div>
</template>

<script>
export default {
    props:{
        fn:{
            type:Function
        }
    },
    data(){
        return{
            searchShow: false,
            dialogFormVisible: false,
            tableLoading: false,
            tableData: [],
            date:'',
            headerList: [{
                    prop: "item_name",
                    label: "名称",
                    width: "350",
                },{
                    prop: "item_code",
                    label: "编码",
                    width: "100",
                }],
        }
    },
    methods:{
        submit(){
            if(!this.date) return 
            let date = this.date
            this.dialogFormVisible = true
            this.searchShow = false
            this.tableLoading = true
            this.fn({date}).then(({data}) => {
                this.tableLoading = false
                this.tableData = data
                this.date = null
            })
        }
    }
}
</script>

<style lang='less'>

</style>